<!--
block-outer
所有模块最外部的包裹组件
-->
<template>
    <div class="block-wrapper">
        <!-- 标题 -->
        <div @click="goDetailPage(title)" class="block-wrapper-header">
            <div class="header-icon"></div>
            {{ title }}
        </div>
        <!-- 主题内容 -->
        <div
            v-if="showSlot"
            class="block-wrapper-con"
            :style="getConStyle(img)"
        >
            <slot></slot>
        </div>
    </div>
</template>

<script>
import {
    changePageRoute,
} from '@/apis';

export default {
    name: 'block-outer',
    props: {
        // 标题
        title: {
            type: String,
            default: '标题',
        },
        // 组件背景图片
        img: {
            type: String,
        },
        // 是否显示组件内容 默认显示
        showSlot: {
            type: Boolean,
            default: true,
        },
    },
    data() {
        // 引入各组件的背景图片
        this.imgs = {
            lb: require('../../assets/lb.png'),
            lm: require('../../assets/lm.png'),
            lt: require('../../assets/lt.png'),
            rb: require('../../assets/rb.png'),
            rt: require('../../assets/rt.png'),
            rm: require('../../assets/rm.png'),
            m: require('../../assets/m.png'),
        };
        // 各个标题点击去往的路径
        this.titles = [
            {
                title: '故障超限指标',
                routeId: '192_235',
            },
            {
                title: '重点任务',
                routeId: '12_316',
            },
            {
                title: '加装改造设备统计',
                routeId: '139_331',
            },
            {
                title: '备品统计',
                routeId: '223_228',
            },
            {
                title: '当日故障',
                routeId: '192_230',
            },
            {
                title: '故障件分布',
                routeId: '192_330',
            },
            {
                title: '年度故障件统计',
                routeId: '192_330', //  TODO
            },
            {
                title: '机检比例',
                routeId: '192_193',
            },
            /* {
                title: '机检比例',
                routeId: '192_193',
            }, */
        ];
        return {};
    },
    methods: {
        // 动态获取样式 组件的背景图片
        getConStyle(img) {
            return {
                width: '100%',
                height: 'calc(100% - .667rem)',
                background: `url(${this.imgs[img]}) no-repeat center center`,
                backgroundSize: '100% 100%',
            };
        },

        // 点击跳转相对应的详情界面
        goDetailPage(title) {
            if (title === '无线超时统计') {
                this.$router.push('/wireless-warn');
            } else if (title === '工作量化跟踪') {
                this.$router.push('/quant');
            } else if (title === '无线报警统计') {
                this.$router.push('/wireless-timeout');
            }
            const { routeId } = this.titles.find((item) => item.title === this.title);
            this.changePageUrl(routeId);
        },

        // 页面跳转方法
        changePageUrl(id) {
            /* changePageRoute(id).then((res) => {
                window.console.log('页面跳转方法', res);
            }).catch((err) => {
                window.console.log('页面跳转方法错误', err);
            }); */
            // window.console.log('changePageRoute(id)', changePageRoute(id));
            window.open(changePageRoute(id));
        },
    },
};
</script>
<style lang='scss' scoped>
.block-wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;

    &-header {
        width: 100%;
        height: 0.667rem;
        box-sizing: border-box;
        padding-left: 0.71rem;
        line-height: 0.667rem;
        position: relative;
        font-size: 0.44rem; // 16
        color: #00a5ff;
        font-weight: 600;
        cursor: pointer;

        .header-icon {
            width: 0.48rem; // 22
            height: 0.26rem; // 12
            background: url("../../assets/title_icon.png") no-repeat center
                center;
            background-size: cover;
            position: absolute;
            top: 0.167rem;
            left: 0;
        }
    }

    /* &-con {
       width: 100%;
       height: calc(100% - .375rem);
       background: url('../../assets/lb.png') no-repeat center center;
       background-size: 100% 100%;
    } */
}
</style>
